<template>
    <div class="add">
        <h1>{{$route.meta.title}}</h1>
        <table>
            <tr>
                <td>所属品类</td>
                <td>
                    <el-select v-model="value" size="medium" popper-class="active">
                        <el-option v-for="item in list" :key="item.id" :label="'/所有/'+item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </td>
            </tr>
            <tr>
                <td>品类名称</td>
                <td>
                    <el-input v-model="inputValue">请输入品类名称</el-input>
                </td>
            </tr>
        </table>
        
        <p class="button">
            <el-button type="primary" @click="confirmAdd">提交</el-button>
        </p>

    </div>
</template> 

<script>
import { addShop, confirmAdd } from "@/utils/api";
export default {
    data() {
        return {
            list: [],
            value: "/所有/",
            id: 0,
            inputValue: "",
        };
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            addShop(0).then((res) => {
                // console.log(res);
                this.list = res.data.data;
            });
        },
        confirmAdd() {
            if (this.value != "/所有/") {
                this.id = this.value;
            }
            confirmAdd(this.id, this.inputValue).then((res) => {
                console.log(res);
                if (res.data.status == 0) {
                    alert(res.data.data);
                    this.$router.push("/classify/index");
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
h1 {
    font-weight: normal;
}

/deep/ {
    .el-input--medium {
        width: 400px;
    }
}
table {
    tr {
        td:nth-child(1) {
            padding: 0 30px;
        }
    }
}
.button {
    width: 600px;
}
.el-button {
    display: block;
    margin: auto;
}
</style>